import { useEffect } from 'react';
import { Button, Row, Col ,Form} from 'antd'
import UserItem from './UserItem'
import UserForm from './AddUserForm'
import * as userAction from '../../actions/user'
import { connect } from 'react-redux';
import './index.css'


function UserView(props) {

  console.log("uerView", props);
  const { getUserLIst, deleteUser, user ,addUserAction} = props
  const [form] = Form.useForm();

  


  /**
   *  页面初始化时获取用户列表
   *  数据里面放依赖项(getUserLIst)就不会有警告
   *  Line 19:6:  React Hook useEffect has a missing dependency: 'getUserLIst'. Either include it 
   *  or remove the dependency array  react-hooks/exhaustive-deps
   */
  useEffect(() => {
    getUserLIst()
  }, [getUserLIst])

 const onCommit  = ()=>{
   console.log(form);
    const formData =  form.getFieldsValue()
    console.log(formData);
    const params = {
      id:user.length+1,
      ...formData
    }
    addUserAction(params)
 }


  return (
    <Row >
      <Col span={12}>
        <ul>
          {user.map(user => <UserItem key={user.id} user={user} deleteById={deleteUser} />)}
        </ul>
      </Col>
      <Col span={12}>
        <UserForm  form={form}/>
        <Button type="primary" onClick={onCommit}>添加</Button>
      </Col>
    </Row>
  )
}


// 如果是用这种方法，那么所有的state 都会放在了props中,一般是不需要全不的state都放进props里面
// const state = state => state

// 
const mapStateToProps = (state) => {
  return {
    user: state.user
  }
}

// 这中方法已经把dispatch已经整合到了方法里面，以后可以直接直接使用 this.props.getUserLIst()
const mapDispatchToProps = (dispatch) => {
  return {
    deleteUser: (id) => { dispatch(userAction.deleteUser(id)) },
    getUserLIst: () => { dispatch(userAction.getUserLIst()) },
    addUserAction :(user)=>{dispatch(userAction.addUserAction(user))}
  }
}


/*
  dispatch
 */
// export default connect(null)(UserView)

/*
 deleteUser: ƒ ()
 getUserLIst: ƒ ()
*/
// export default connect(null, userAction)(UserView) 

/*
  counter: 6
  deleteUser: ƒ ()
  getUserLIst: ƒ ()
  user: {}
*/
// export default connect((state)=>state,userAction)(UserView)

/*
  deleteUser: () => {…}
  getUserLIst: () => {…}
  user: {}
*/

export default connect(mapStateToProps, mapDispatchToProps)(UserView)


/*
  deleteUser: () => {…}
  getUserLIst: () => {…}
*/
// export default connect(null,mapDispatchToProps)(UserView)
